<template>
  <el-dialog title="" :close-on-press-escape="true" :close-on-click-modal="true"
             :visible.sync="visible" :modal="true"
             width="70%" append-to-body>
    <el-form class="main" :model="dataForm" size="small" label-width="90px" label-position="left">
      <template v-if="!loading">
        <h2>产品详情</h2>
        <el-col :span="12">
          <el-row :gutter="15">
            <el-col :span="24">
              <jnpf-form-tip-item label="产品名称：" prop="	f_product_name">
                <JnpfInput v-model="dataForm.f_product_name" :style='{"width":"100%"}' readonly>
                </JnpfInput>
              </jnpf-form-tip-item>
            </el-col>
            <el-col :span="24">
              <jnpf-form-tip-item label="服务行业：" prop="f_service_industry">
                <JnpfInput v-model="dataForm.f_service_industry" :style='{"width":"100%"}' readonly>
                </JnpfInput>
              </jnpf-form-tip-item>
            </el-col>
            <el-col :span="24">
              <jnpf-form-tip-item label="服务细分行业：" prop="f_service_industry_detail" label-width="110px">
                <JnpfInput v-model="dataForm.f_service_industry_detail" :style='{"width":"100%"}' readonly>
                </JnpfInput>
              </jnpf-form-tip-item>
            </el-col>
            <el-col :span="24">
              <jnpf-form-tip-item label="产品类别：" prop="product_type">
                <JnpfInput v-model="dataForm.product_type" :style='{"width":"100%"}' readonly>
                </JnpfInput>
              </jnpf-form-tip-item>
            </el-col>
            <el-col :span="24">
              <jnpf-form-tip-item label="产品类别细分：" prop="f_product_type_detail" label-width="110px">
                <JnpfInput v-model="dataForm.f_product_type_detail" :style='{"width":"100%"}' readonly>
                </JnpfInput>
              </jnpf-form-tip-item>
            </el-col>
            <el-col :span="24">
              <jnpf-form-tip-item label="具体产品类别名称：" prop="f_product_type_detail_down" label-width="140px">
                <JnpfInput v-model="dataForm.f_product_type_detail_down" :style='{"width":"100%"}' readonly>
                </JnpfInput>
              </jnpf-form-tip-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="12">
          <el-row :gutter="15">
            <el-col :span="24">
              <jnpf-form-tip-item label="产品图片：" prop="picture">
                <img v-if="dataForm.img !== null" :src="'/cloud-api' + dataForm.img"/>
                <img v-else src="@/assets/images/market.png"/>
              </jnpf-form-tip-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="24">
          <jnpf-form-tip-item
            label="产品简介：" prop="f_product_info">
            <JnpfTextarea v-model="dataForm.f_product_info"
                          placeholder="请输入" :style='{"width":"100%"}' true type="textarea"
                          :autosize='{"minRows":4,"maxRows":10}' readonly>
            </JnpfTextarea>
          </jnpf-form-tip-item>
        </el-col>
        <el-col :span="24">
          <!--          <jnpf-form-tip-item label="产品详情：" prop="f_detail">-->
          <!--            <JnpfEditor v-model="dataForm.f_detail" placeholder="请输入" :style='{"width":"100%"}'  disabled>-->
          <!--            </JnpfEditor>-->
          <!--          </jnpf-form-tip-item>-->
          <jnpf-form-tip-item label="产品详情：" prop="f_detail" class="">
            <div v-html="dataForm.f_detail" class="product_des" disabled></div>
          </jnpf-form-tip-item>

        </el-col>
        <el-col :span="24" class="file" >
          <jnpf-form-tip-item label="文件：" prop="f_file" v-if="dataForm.f_file !=null">
            <JnpfUploadFile v-model="dataForm.f_file"
                            disabled
                            detailed :fileSize="10" sizeUnit="MB" :limit="9" pathType="defaultPath" :isAccount="0"
                            buttonText="点击上传" :style='{"width":"100%","margin":"15px 0px"}'>
            </JnpfUploadFile>
          </jnpf-form-tip-item>
        </el-col>
        <!--        <el-col :span="12">-->
        <!--          <jnpf-form-tip-item label="企业名称：" prop="Enterprise_name">-->
        <!--            <JnpfInput v-model="dataForm.Enterprise_name" :style='{"width":"100%"}' readonly>-->
        <!--            </JnpfInput>-->
        <!--          </jnpf-form-tip-item>-->
        <!--        </el-col>-->
        <el-col :span="24">
          <jnpf-form-tip-item label="部署方式：" prop="f_deployment_method">
            <JnpfInput v-model="dataForm.f_deployment_method" :style='{"width":"45%"}' readonly>
            </JnpfInput>
          </jnpf-form-tip-item>
        </el-col>
        <el-col :span="12">
          <jnpf-form-tip-item label="周期：" prop="f_cycle">
            <el-input placeholder="请输入内容" v-model="dataForm.f_cycle" readonly>
              <template slot="append">月</template>
            </el-input>
          </jnpf-form-tip-item>
        </el-col>
        <el-col :span="12">
          <jnpf-form-tip-item label="价格区间 （万元）：" prop="f_price" label-width="150px">
            <el-input placeholder="请输入内容" v-model="dataForm.f_price" readonly>
              <template slot="append">万元</template>
            </el-input>
          </jnpf-form-tip-item>
        </el-col>
        <el-col :span="12">
          <jnpf-form-tip-item label="联系人：" prop="Contact_person">
            <JnpfInput v-model="dataForm.Contact_person" :style='{"width":"100%"}' readonly>
            </JnpfInput>
          </jnpf-form-tip-item>
        </el-col>
        <el-col :span="12">
          <jnpf-form-tip-item label="联系电话：" prop="Contact_information">
            <JnpfInput v-model="dataForm.Contact_information" :style='{"width":"100%"}' readonly>
            </JnpfInput>
          </jnpf-form-tip-item>
        </el-col>
        <el-col :span="12">
          <jnpf-form-tip-item label="联系邮箱：" prop="email">
            <JnpfInput v-model="dataForm.email" :style='{"width":"100%"}' readonly>
            </JnpfInput>
          </jnpf-form-tip-item>
        </el-col>
      </template>
    </el-form>
  </el-dialog>
</template>

<script>
import axios from 'axios';

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "DetailProduct",
  data() {
    return {
      visible: false,
      loading: false,
      files: [],
      title: "",
      dataForm: {
        id: '',
        f_product_name: '',
        img: [],
        f_service_industry: '',
        f_service_industry_detail: '',
        product_type: '',
        f_product_type_detail: '',
        f_product_type_detail_down: '',
        type: '',
        f_deployment_method: '',
        f_product_info: '',
        f_detail: '',
        f_file: [],
        f_cycle: 0,
        f_price: 0,
        Enterprise_name: '',
        Contact_person: '',
        Contact_information: '',
        email: ''
      }
    }
  },
  methods: {
    init(id) {
      this.dataForm.id = id
      // this.title = title + '详情'
      this.visible = true
      this.loading = true
      const url = `/cloud-api2/portal/marketDetail?id=${id}`;
      axios.get(url).then(res => {
        var data = res.data.data[0]
        this.dataForm.f_product_name = data.f_product_name;
        this.dataForm.img = data.img;
        this.dataForm.f_service_industry = data.f_service_industry;
        this.dataForm.f_service_industry_detail = data.f_service_industry_detail;
        this.dataForm.product_type = data.product_type;
        this.dataForm.f_product_type_detail = data.f_product_type_detail;
        this.dataForm.f_product_type_detail_down = data.f_product_type_detail_down;
        this.dataForm.type = data.type;
        this.dataForm.f_deployment_method = data.f_deployment_method;
        this.dataForm.f_product_info = data.f_product_info;
        this.dataForm.f_detail = data.f_detail;
        this.dataForm.f_file = JSON.parse(data.f_file);
        this.dataForm.f_cycle = data.f_cycle;
        this.dataForm.f_price = data.f_price;
        this.dataForm.Enterprise_name = data.Enterprise_name;
        this.dataForm.Contact_person = data.Contact_person;
        this.dataForm.Contact_information = data.Contact_information;
        this.dataForm.email = data.email;
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.product_des {
  width: 100%;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  color: #606266;
  padding: 10px 15px;
  min-height: 300px;
}

.el-col {
  padding: 0px 20px;
}

.el-form-item--small {
  margin-bottom: 5px;
}

::v-deep .el-dialog__wrapper {
  overflow: hidden !important;
}

.file {
  margin: 15px 0;
}

.UploadFile-container {
  margin: 0 !important;
}

::v-deep .el-dialog {
  max-height: 95%;
  margin: auto;
  overflow-y: auto;
  border-radius: 8px;
  margin-top: 20px !important;
}

::v-deep .el-dialog__body {
  width: 90%;
  margin: 0 auto;
  min-height: 700px;
}

.main {
  position: relative;

  h2 {
    border-bottom: 1px #BBBBBB solid;
    font-size: 20px;
    color: #071838;
    text-align: center;
    line-height: 40px;
    padding-bottom: 10px;
    margin-bottom: 40px;
  }

  ::v-deep img {
    max-width: 100%;
  }
}
</style>
